<template>
  <div class="swiper-top">
    <swiper
      class="swiper-container"
      :navigation="{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }"
      :allowTouchMove="(allowTouchMove = false)"
    >
      <!-- 
        :pagination="{
        clickable: false,
        paginationType: 'custom',
      }"
     -->
      <div class="swiper-button-prev"></div>

      <swiper-slide class="swiper-slide">
        <ul
          @click="selectLabel($event)"
          v-for="(Itme, index) in data.songItem"
          :key="index"
        >
          <p>{{ Itme.name }}</p>
          <li v-for="Itme1 in data.songSub[index].slice(0, 8)" :key="Itme1.id">
            <a
              href="javascript:;"
              class="swiper-slide-whole"
              @click="add(Itme1.name, Itme1.id)"
              :class="{ active: data.currentSort === Itme1.id }"
              >{{ Itme1.name }}</a
            >
          </li>
          <li>
            <a
              href="javascript:;"
              class="swiper-slide-whole"
              @click="more(index)"
              v-if="data.songSub[index].length < 9 ? false : true"
              :class="{ active: index === data.more }"
              >更多
            </a>
          </li>
          <div
            class="song-more"
            v-if="
              index == data.more && data.songSub[index].length > 8
                ? true
                : false
            "
          >
            <li v-for="Itme1 in data.songSub[index].slice(8)" :key="Itme1.id">
              <a
                href="javascript:;"
                class="swiper-slide-whole"
                @click="add(Itme1.name, Itme1.id)"
                :class="{ active: data.currentSort === Itme1.id }"
                >{{ Itme1.name }}</a
              >
            </li>
          </div>
        </ul>
      </swiper-slide>

      <div class="swiper-button-next"></div>
    </swiper>
  </div>

  <div class="recommend-song-title-box">
    <div class="song-label" v-if="data.songHover">
      <span class="song-label-box"
        >{{ data.songName }}
        <a href="javascript:;" @click="delBabel">x</a></span
      >
    </div>
    <div class="recommend-song-title" v-else>
      <h3>推荐歌单</h3>
    </div>
  </div>
  <div class="recommend-song">
    <ul class="recommend-song-list">
      <li
        class="recommend-song-itme"
        v-for="itme in data.songList"
        :key="itme.userId"
      >
        <div></div>
        <div class="recommend-song-itme-box">
          <div class="recommend-song-img">
            <a href="javascript:;"><img :src="itme.coverImgUrl" /></a>
            <i class="recommend-song-playicon"> </i>
            <i
              class="recommend-song-img-background"
              @click="gopalylist(itme.id)"
            ></i>
          </div>
          <h4 class="recommend-song-name">
            <a href="">{{ itme.userId }}</a>
            <a href="javascript:;">{{ itme.name }}</a>
          </h4>
          <div class="recommend-song-user">
            <a href="javascript:;">{{ itme.creator.nickname }}</a>
          </div>
          <div class="recommend-song-num">播放量:{{ itme.playCount }}万</div>
        </div>
      </li>
    </ul>

    <div class="recommend-song-button">
      <div>
        <h3>查看更多内容，请下载客户端</h3>
      </div>
      <div>
        <button>立即下载</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Classified",
};
</script>

<script setup>
import { getSongItem, getSongList } from "./classified-request";
import { Swiper, SwiperSlide } from "swiper/vue";

import SwiperCore, {
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  Autoplay,
} from "swiper";

import "swiper/swiper-bundle.css";
import { onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay]);

const data = reactive({
  songHover: false,
  songList: {},
  newsongsub: {},
  songSub: [],
  songItem: [],
  currentSort: "",
  limit: 20,
  songName: "官方歌单",
  songIndex: 0,
  more: "",
});

const router = useRouter();

const gopalylist = (Id) => {
  console.log(Id);
  router.push({ name: "PlayList", query: { playListId: Id } });
};

const delBabel = () => {
  data.songHover = false;
  getALLSongList(data.limit, "推荐");
  data.currentSort = "";
};

const selectLabel = (e) => {
  if (e.target.localName !== "a") return;
  if (e.target.innerText == "更多") {
    return;
  }
  data.songName = e.target.innerText;

  data.songHover = true;
};

const getALLSongItem = async () => {
  const res = await getSongItem();

  for (let i in res.categories) {
    let temp = {};
    temp.name = res.categories[i];
    temp.id = i;
    data.songItem.push(temp);
  }

  const songSubBox = res.sub.map((item, index) => {
    item.id = index;
    const { name, category, id } = item;
    return { name, category, id };
  });
  for (let key in data.songItem) {
    let temp = [];
    songSubBox.map((item, index) => {
      if (item.category == key) {
        temp.push(item);
      }
    });
    data.songSub.push(temp);
  }
};

const add = (e, index) => {
  data.more = "";
  data.currentSort = index;
  getALLSongList(data.limit, e);
};

const more = (index) => {
  if (data.more == index) {
    data.more = "";
    return;
  }

  data.more = index;
  console.log(data.more);
};

const getALLSongList = async (limit, cat) => {
  const res = await getSongList(limit, cat);
  data.songList = res.playlists.map((item) => {
    const playCount = Math.ceil(item.playCount / 10000);
    const { coverImgUrl, name, creator, id } = item;
    return { coverImgUrl, name, creator, playCount, id };
  });
};

onMounted(() => {
  getALLSongItem();
  getALLSongList(data.limit, "推荐");
  window.scrollTo(0, 0);
});
</script>

<style scoped>
/************ 轮播图 ************/
body {
  margin: 0;
  padding: 0;
}
.swiper-top {
  position: relative;
  padding-top: 60px;
  height: 174px;
  background-color: #fafafa;
}
.swiper-container {
  --swiper-theme-color: #ff6600;
  --swiper-pagination-color: #afafaf;
  --swiper-navigation-color: #000;
  height: 116px;
  overflow: visible;
}

.swiper-pagination-bullets {
  position: absolute;
  bottom: 100px;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  padding: 0;
}

.swiper-pagination-bullet {
  color: #000;
  height: 100px;
  width: 100px;
  background-color: #000;
}
.swiper-pagination {
  color: #000;
  height: 100px;
  width: 100px;
  background-color: #000;
}

.swiper-slide ul {
  padding: 0;
  font-size: 14px;
  margin: 0 22px 0 0;
  border-right: 1px solid #eeeef0;
  box-sizing: border-box;
  line-height: 26px;
  width: 238px;
}

.swiper-slide > ul > li {
  float: left;
  list-style-type: none;
  margin-bottom: 4px;
  line-height: 26px;
  width: 76px;
}

.swiper-slide p {
  margin: 0;
  font-weight: bold;
  color: #999;
}

.swiper-slide .swiper-slide-whole {
  padding: 0 8px;
  height: 26px;
  line-height: 26px;
  color: #000;
  text-decoration: none;
}

.song-more {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  left: 150px;
  right: 165px;
  bottom: -90px;
  height: 52px;
  z-index: 1;
  background-color: #fff;
  border-radius: 3px;
  border: none;
  box-shadow: 0 0 10px hsl(0deg 0% 72% / 65%);
  padding: 19px 0;
}

.song-more li {
  height: 25px;
  display: flex;
  flex-wrap: nowrap;
  text-align: center;
  white-space: none;
  padding: 0;
}

.song-more li a {
  white-space: none;
}

.swiper-slide .swiper-slide-whole:hover {
  color: #31c27c;
}

.swiper-button-next {
  /* opacity: 0; */
  background-color: #ededed;
}

.swiper-button-next {
  position: absolute;
  right: -60px;
  top: 24px;
  display: flex;
  line-height: 100%;
  width: 80px;
  background-color: #ededed;
  height: 116px;
  opacity: 0;
  transition: all 0.7s;
}

.swiper-button-prev {
  position: absolute;
  left: -60px;
  top: 24px;
  bottom: 100px;
  display: flex;
  line-height: 100%;
  width: 80px;
  background-color: #ededed;
  height: 116px;
  opacity: 0;
  transition: all 0.7s;
}

.active {
  background-color: #31c27c;
  color: #fff !important;
  text-decoration: none;
}

.swiper-button-next:after {
  line-height: 80px;
  color: #000;
}

.swiper-button-prev:after {
  line-height: 80px;
  color: #000;
}

.swiper-top:hover .swiper-button-next {
  opacity: 1;
  position: absolute;
  right: 0px;
  bottom: 100px;
  transition: all 0.7s;
}

.swiper-top:hover .swiper-button-prev {
  opacity: 1;
  position: absolute;
  left: 0px;
  bottom: 100px;
  transition: all 0.7s;
}

/************ 推荐歌单 ************/

.recommend-song-title-box {
  background-color: #fafafa;
}
.song-label {
  position: relative;
  width: 1250px;
  height: 60px;
  margin: 0 auto;
}

.song-label-box {
  float: left;
  border: 1px solid #c9c9c9;
  border-radius: 3px;
  padding-right: 10px;
  padding-left: 10px;
  margin: 8px 6px 0 0;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
}

.song-label-box a {
  padding: 0 6px;
  height: 14px;
  width: 15px;
  text-align: center;
  font-size: 14px;
  text-decoration: none;
}
.song-label-box:hover {
  color: #fff;
  background-color: #31c27c;
}
.song-label-box:hover a {
  color: #fff;
}
.song-label-box a:hover {
  background-color: #6acb9b;
  border-radius: 50%;
}

.recommend-song {
  background-color: #fafafa;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.recommend-song-title {
  width: 1250px;
  height: 60px;
  margin: 0 auto;
}

.recommend-song-title h3 {
  margin: 0;
  font-weight: normal;
  font-size: 24px;
  height: 60px;
  line-height: 60px;
}

.recommend-song-list {
  padding: 0;
  list-style-type: none;
  flex-wrap: wrap;
  width: 1250px;
  display: flex;
}

.recommend-song-itme {
  position: relative;
  padding-right: 26px;
  padding-bottom: 22px;
}

.recommend-song-itme .recommend-song-img a {
  display: block;
  overflow: hidden;
  height: 224px;
  color: #000;
}

.recommend-song-img img {
  width: 224px;
  height: 224px;
  transition: all 0.7s;
}

.recommend-song-playicon {
  position: absolute;
  top: 99px;
  left: 99px;
  width: 30px;
  height: 30px;
  background-image: url(./img/play.png);
  background-position: center center;
  background-size: cover;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.7s;
}
.recommend-song-img-background {
  position: absolute;
  top: 0;
  display: block;
  width: 224px;
  height: 224px;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
}

.recommend-song-img:hover .recommend-song-img-background {
  opacity: 0.2;
  transition: all 0.4s;
  cursor: pointer;
}

.recommend-song-img:hover > .recommend-song-playicon {
  position: absolute;
  top: 79px;
  left: 79px;
  width: 70px;
  height: 70px;
  opacity: 1;
  transform: scale(1.1);
  transition: all 0.4s;
  cursor: pointer;
}

.recommend-song-img:hover img {
  transform: scale(1.1);
  transition: all 0.5s;
}

.recommend-song-name {
  font-size: 14px;
  font-weight: normal;
  margin: 0;
  padding-top: 15px;
  width: 224px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recommend-song-itme a {
  text-decoration: none;
  color: #000;
}

.recommend-song-name > a:hover {
  color: #31c27c;
}
.recommend-song-user > a:hover {
  color: #31c27c;
}

.recommend-song-use {
  height: 22px;
}
.recommend-song-user a {
  color: #999;
  font-size: 14px;
  line-height: 22px;
}
.recommend-song-num {
  color: #999;
  font-size: 14px;
  line-height: 22px;
}

.recommend-song-button {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  width: 1200px;
  height: 90px;
  flex-direction: column;
  align-items: center;
  padding-top: 22px;
  padding-bottom: 22px;
}

.recommend-song-button h3 {
  font-size: 18px;
}

.recommend-song-button button {
  width: 175px;
  height: 40px;
  border-radius: 40px;
  font-size: 16px;
  color: #fff;
  background-color: #31c27c;
  border: none;
  margin-top: 20px;
  cursor: pointer;
}

.recommend-song-button button:hover {
  background-color: #2caf6f;
}
</style>
